<template>
  <el-dialog title="预览" width="700px" height="500px" :visible="visible" @close="handleClose">
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      :poster="data.courseTitleImage"
      data-setup='{}'
      style="width:100%;height:500px">
      <source :src="data.videoLink"></source>
    </video>
  </el-dialog>
</template>

<script>
import 'video.js/dist/video-js.min.css'
require('video.js')
  export default {
    props: ['data', 'visible'],
    data () {
      return {

      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      }
    }
  }
</script>

<style>

 
</style>
